import React from 'react';
import { Form, Input, Button, Card, message } from 'antd';

// 模仿 admin-web 的系统邮箱配置页面
export default function Email() {
  const [form] = Form.useForm();

  const onFinish = (values) => {
    // 这里模拟保存成功，真实项目可替换为实际 API 调用
    try {
      // 本地持久化示例
      localStorage.setItem('system_email_config', JSON.stringify(values));
      message.success('保存成功');
    } catch (e) {
      message.error('保存失败，请重试');
    }
  };

  const onReset = () => {
    form.resetFields();
  };

  return (
    <Card title="邮箱配置" bordered={false}>
      <Form
        form={form}
        labelCol={{ span: 6 }}
        wrapperCol={{ span: 10 }}
        onFinish={onFinish}
      >
        <Form.Item
          label="邮箱账号"
          name="zhanghao"
          rules={[
            { required: true, message: '请输入邮箱地址' },
            { type: 'email', message: '请输入正确的邮箱地址' },
          ]}
        >
          <Input placeholder="邮箱账号" />
        </Form.Item>

        <Form.Item
          label="POP3/SMTP服务授权码"
          name="shouquanma"
          rules={[{ required: true, message: '授权码不为空' }]}
        >
          <Input placeholder="POP3/SMTP服务授权码" />
        </Form.Item>

        <Form.Item
          label="SMTP服务器"
          name="fuwuqi"
          rules={[{ required: true, message: '不能为空' }]}
        >
          <Input placeholder="SMTP服务器" />
        </Form.Item>

        <Form.Item wrapperCol={{ span: 10, offset: 6 }}>
          <Button type="primary" htmlType="submit" style={{ marginRight: 12 }}>
            保存
          </Button>
          <Button onClick={onReset}>重置</Button>
        </Form.Item>
      </Form>
    </Card>
  );
}